<template>
  <div class="demo">
    <div class="demo-title">可勾选</div>
    <div class="demo-content">
      <TreeSelect
        v-model:value="value"
        style="width: 100%"
        :tree-data="treeData"
        tree-checkable
        allow-clear
        :show-checked-strategy="SHOW_PARENT"
        placeholder="Please select"
        tree-node-filter-prop="label"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import TreeSelect from '@sscd/tree-select';
  import type { TreeSelectProps } from '@sscd/tree-select';
  const value = ref<string[]>(['0-0-0']);
  watch(
    () => value,
    () => console.log(value.value)
  );
  const treeData: TreeSelectProps['treeData'] = [
    {
      label: 'Node1',
      value: '0-0',
      children: [{ label: 'Child Node1', value: '0-0-0' }],
    },
    {
      label: 'Node2',
      value: '0-1',
      children: [
        { label: 'Child Node3', value: '0-1-0', disabled: true },
        { label: 'Child Node4', value: '0-1-1' },
        { label: 'Child Node5', value: '0-1-2' },
      ],
    },
  ];
  const { SHOW_PARENT } = TreeSelect;
</script>
